<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<div class="box">
    <div>div标签1</div>
    <span>span标签1</span>
    <p>p标签1</p>
    <div>div标签2</div>
    <span>span标签2</span>
    <p>p标签2</p>
</div>

<button class="add">添加元素</button>
<ul class="list">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
</ul>

<ol class="nav">
    <li>导航1</li>
    <li>导航2</li>
    <li>导航3</li>
</ol>

<script>
// 事件委托（事件代理）
// 子元素将事件委托给父元素来完成（嵌套结构，相同的事件）
// 事件委托的原理：事件传播

// 需求：点击box中的每一个元素，分别修改他们的字体颜色（div为red，p为blue，span为green）
// var divs = document.querySelectorAll('.box div');
// var ps = document.querySelectorAll('.box p');
// var spans = document.querySelectorAll('.box span');
// for (var i = 0; i < divs.length; i++) {
//     divs[i].onclick = function (){
//         this.style.color = 'red';
//     }
// }
// for (var i = 0; i < ps.length; i++) {
//     ps[i].onclick = function (){
//         this.style.color = 'blue';
//     }
// }
// for (var i = 0; i < spans.length; i++) {
//     spans[i].onclick = function (){
//         this.style.color = 'green';
//     }
// }

// var box = document.querySelector('.box');
// for (var i = 0; i < box.children.length; i++) {
//     box.children[i].onclick = function (){
//         if (this.tagName === 'DIV') {
//             this.style.color = 'red';
//         }
//         if (this.tagName === 'P') {
//             this.style.color = 'blue';
//         }
//         if (this.tagName === 'SPAN') {
//             this.style.color = 'green';
//         }
//     }
// }
// 上面的代码：循环执行了6次，事件添加了6个，事件处理函数存了6个

// 事件委托实现
// 将div p span的点击事件委托给box
var box = document.querySelector('.box');
box.onclick = function (e){
    if (e.target.className === 'box') {
        return;
    }
    if (e.target.tagName === 'DIV') {
        e.target.style.color = 'red';
    }
    if (e.target.tagName === 'P') {
        e.target.style.color = 'blue';
    }
    if (e.target.tagName === 'SPAN') {
        e.target.style.color = 'green';
    }
}

var add = document.querySelector('.add');
var list = document.querySelector('.list');
var lis = document.querySelectorAll('.list li');

/* // 点击添加一个新的li
add.onclick = function (){
    var oli = document.createElement('li');
    oli.innerText = 'li x';
    list.appendChild(oli);

    // 给新创建的li添加点击事件
    oli.onclick = function (){
        this.style.color = 'red';
    }
}
// 给每一个li添加点击事件
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function (){
        this.style.color = 'red';
    }
} */

// 事件委托实现
document.body.onclick = function (e){
    // 添加li元素
    if (e.target.className === 'add') {
        var oli = document.createElement('li');
        oli.innerText = 'li x';
        list.appendChild(oli);
    }
    // 修改li的字体颜色
    if (e.target.tagName === 'LI' && e.target.parentNode.className === 'list') {
        e.target.style.color = 'red';
    }
}

// 事件委托的优点：
// 1.提高代码执行效率
// 2.减少注册事件，更少占用内存
// 3.动态元素或未来元素无需重新添加事件



</script>
</body>
</html>